<template>
  <el-card>
    <div class="expectations">
      <v-chart :option="getOption()" autoresize />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Expectations',
  methods: {
    getOption: function () {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        legend: {
          data: ['expected', 'actual']
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: 'expected',
            type: 'line',
            color: ['#3888fa'],
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                }
              }
            },
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
            smooth: true,
            data: [100, 120, 161, 134, 105, 160, 165]
          },
          {
            name: 'actual',
            type: 'line',
            color: ['#ff005a'],
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff' // 面积图
                }
              }
            },
            animationDuration: 2800,
            animationEasing: 'cubicInOut', // 设置平滑
            data: [120, 82, 91, 154, 162, 140, 145]
          }
        ]
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.expectations {
  margin: 20px 0;
  width: 100%;
  height: 350px;
}
</style>